import { trigger, state, style, animate, transition, keyframes, group } from '@angular/animations';

export const routeAnimation = trigger('routeAnimation',[
    state('void', style({'position':'fixed','width':'100%','height':'80%'})),
    // 定义另外一个状态
    state('*', style({ 'position':'fixed','width':'100%','height':'80%'})),
    // 定义运动过程(从out到hover状态)
    transition(':enter', [
        style({transform:'translateX(-100%)',opacity:0}),
        group([
            animate('.5s ease-in-out',style({transform:'translateX(0)'})),
            animate('.3s ease-in',style({opacity:1}))
        ])
    ]),
    // 定义运动过程(从hover到out)
    transition(':leave',[
        style({transform:'translateX(0)',opacity:1}),
        group([
            animate('.5s ease-in-out',style({transform:'translateX(100%)','position':'inherit'})),
            animate('.3s ease-in',style({opacity:0}))  
        ])

    ]),
]);